<template>
    <div class="recomfood">
        <div class="recomfood-header">
            <div class="recomfood-header-list">
                <div @click="showPopupPosition">位置</div>
                <div @click="showPopupCuisine">菜系</div>
                <div @click="showPopupRecommend">智能推荐</div>
            </div>
        </div>
        <div>
            <van-popup v-model="showPosition" position="top" :style="{ height: '30%' }" class="showPosition">
                <ul class="showPopPosition">
                    <li>不限</li>
                    <li>1公里内</li>
                    <li>2公里内</li>
                    <li>5公里内</li>
                </ul>
            </van-popup>
            <van-popup v-model="showCuisine" position="top" :style="{ height: '30%' }" class="showPosition">
                <ul class="showPopCuisine">
                    <li>不限</li>
                    <li>火锅</li>
                    <li>自助</li>
                    <li>川菜</li>
                </ul>
            </van-popup>
            <van-popup v-model="showRecommend" position="top" :style="{ height: '30%' }" class="showPosition">
                <ul class="showPopRecommend">
                    <li>不限</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                </ul>
            </van-popup>
        </div>
        <div class="recomfood-main">
            <div>
                <img src="../../../../assets/food01.png" alt="">
                <div class="recomfood-main-list">
                    <div>
                        烤匠麻辣烤鱼(IFS店)
                    </div>
                    <div>
                        KaoJiang
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.8分</span>
                    </div>
                    <div>
                        川菜 春熙路
                    </div>
                    <div class="recomfood-main-list-bottom">
                        <p>距离市中心<span>2.3</span>km</p>
                        <p>&#165;<span>93</span>/人</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/food02.png" alt="">
                <div class="recomfood-main-list">
                    <div>
                        蜀九香火锅
                    </div>
                    <div>
                        ShuJiuXiang Hot Pot
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.6分</span>
                    </div>
                    <div>
                        火锅 锦里古街
                    </div>
                    <div class="recomfood-main-list-bottom">
                        <p>距离市中心<span>1.5</span>km</p>
                        <p>&#165;<span>118</span>/人</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/food03.png" alt="">
                <div class="recomfood-main-list">
                    <div>
                        川西坝子(清江东路店)
                    </div>
                    <div>
                        ChuanXi BaZi HotPot
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.7分</span>
                    </div>
                    <div>
                        火锅 一品天下/金沙遗址
                    </div>
                    <div class="recomfood-main-list-bottom">
                        <p>距离市中心<span>4.9</span>km</p>
                        <p>&#165;<span>96</span>/人</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/food04.png" alt="">
                <div class="recomfood-main-list">
                    <div>
                        柴门饭儿(远洋太古里店)
                    </div>
                    <div>
                        Bavin Door Feel
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.5分</span>
                    </div>
                    <div>
                        川菜 大慈寺
                    </div>
                    <div class="recomfood-main-list-bottom">
                        <p>距离市中心<span>3.0</span>km</p>
                        <p>&#165;<span>90</span>/人</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showPosition: false,
                showCuisine: false,
                showRecommend: false,
                value:4
            }
        },

        methods: {
            showPopupPosition() {
                this.showPosition = true;
            },
            showPopupCuisine() {
                this.showCuisine = true;
            },
            showPopupRecommend() {
                this.showRecommend = true;
            }
        }
    }
</script>

<style>
    .recomfood-header {
        width: 100%;
        height: 26px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .recomfood-header-list {
        width: 644px;
        height: 26px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .recomfood-header-list > div {
        font-size: 24px;
        line-height: 26px;
        height: 26px;
        width: 33%;
    }

    .recomfood-header-list > div:nth-child(2) {
        width: 34%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .recomfood-header-list > div:nth-child(3) {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    /*美食距离弹出层*/
    .showPopPosition {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .showPopPosition > li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        margin-left: 30px;
    }

    .showPopPosition > li:nth-child(1) {
        margin-top: 20px;
    }

    .showPosition{
        margin-top: 260px;
    }

    /*美食菜系弹出层*/

    .showPopCuisine {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .showPopCuisine > li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        text-align: center;
    }

    .showPopCuisine > li:nth-child(1) {
        margin-top: 20px;
    }

    /*美食智能推荐*/
    .showPopRecommend{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .showPopRecommend > li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        margin-right: 30px;
        display: flex;
        justify-content: flex-end;
    }

    .showPopRecommend > li:nth-child(1) {
        margin-top: 20px;
    }

    recomfood .van-overlay{
        margin-top: 260px;
    }

    /*美食推荐列表*/
    .recomfood-main{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .recomfood-main > div{
        width: 680px;
        height: 260px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    /*左侧插图*/
    .recomfood-main > div > img{
        width: 220px;
        height: 220px;
        border-radius: 20px;
    }
    /*右侧文字描述*/
    .recomfood-main > div > div{
        width: 430px;
        height: 220px;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .recomfood-main-list-bottom{
        height: 36px;
        width: 430px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .recomfood-main-list > div:nth-child(1){
        height: 56px;
        line-height: 56px;
        font-size: 30px;
        color: #333333;
    }
    .recomfood-main-list > div:nth-child(2){
        height: 40px;
        line-height: 40px;
        font-size: 26px;
        color: #333333;
    }
    .recomfood-main-list > div:nth-child(3){
        display: flex;
        align-items: center;
        height: 40px;
    }
    .recomfood-main-list > div:nth-child(3) > span{
        height: 20px;
        margin-left: 10px;
        font-size: 16px;
        color: #333333;
    }
    .recomfood-main-list > div:nth-child(4){
        height: 36px;
        font-size: 20px;
        color: #989898;
    }
    .recomfood-main-list-bottom > p:nth-child(1){
        font-size: 20px;
        color: #989898;
    }
    .recomfood-main-list-bottom > p:nth-child(2){
        font-size: 20px;
        color: #333333;
    }
    .recomfood-main-list-bottom > p:nth-child(2) > span{
        font-size: 28px;
        color: #f77754;
    }
</style>
